<template>
  <div>
    <el-tabs tab-position="left">
      <el-tab-pane label="查看用户">
        <chakanyonghu></chakanyonghu>
      </el-tab-pane>
      <el-tab-pane label="管理航班">
        <div class="flex">
          <!-- 左边 -->
          <div style="width:660px;height:400px">
            <div class="flex">
              <div class="rate-block">
                <!-- 正常 -->
                <div class="rate-panel rate-panel-normal">
                  <!-- 上方body -->
                  <div class="panel-rate-heading">
                    <!-- 左侧img -->
                    <div>
                      <img src="../assets/admin/schedule.png" width="60px">
                    </div>
                    <!-- 右侧data -->
                    <div class="text-right">
                      <!-- 数量 -->
                      <div class="huge">
                        <animated-number :num="normalStat.total"></animated-number>
                      </div>
                      <!-- 标签名 -->
                      <div>正 常</div>
                    </div>
                  </div>
                  <!-- 下方footer -->
                  <div class="panel-rate-footer">
                    运作中 {{normalStat.rate}}%
                  </div>
                </div>
              </div>
              <div class="rate-block">
                <!-- 延误 -->
                <div class="rate-panel rate-panel-delay">
                  <!-- 上方body -->
                  <div class="panel-rate-heading">
                    <!-- 左侧img -->
                    <div><img src="../assets/admin/delay.png" width="60px"></div>
                    <!-- 右侧data -->
                    <div class="text-right">
                      <!-- 数量 -->
                      <div class="huge">
                        <animated-number :num="delayStat.total"></animated-number>
                      </div>
                      <!-- 标签名 -->
                      <div>延 误</div>
                    </div>
                  </div>
                  <!-- 下方footer -->
                  <div class="panel-rate-footer">
                    延误率 {{delayStat.rate}}%
                  </div>
                </div>
              </div>
              <div class="rate-block">
                <!-- 取消 -->
                <div class="rate-panel rate-panel-cancel">
                  <!-- 上方body -->
                  <div class="panel-rate-heading">
                    <!-- 左侧img -->
                    <div>
                      <img src="../assets/admin/cancel.png" width="60px">
                    </div>
                    <!-- 右侧data -->
                    <div class="text-right">
                      <!-- 数量 -->
                      <div class="huge">
                        <animated-number :num="cancelStat.total"></animated-number>
                      </div>
                      <!-- 标签名 -->
                      <div>已 取 消</div>
                    </div>
                  </div>
                  <!-- 下方footer -->
                  <div class="panel-rate-footer">
                    取消率 {{cancelStat.rate}}%
                  </div>
                </div>
              </div>
            </div>
            <div>
              <flight-date-chart v-bind:flights="this.flights"></flight-date-chart>
            </div>
          </div>
          <!-- 右边 -->
          <div style="margin: 0 0 0 100px;">
            <div>
              <flight-number-chart v-bind:flights="this.flights"></flight-number-chart>
            </div>
          </div>
        </div>
        <!-- 航班列表 -->
        <div>
          <admin-list v-on:edit-flight="editFlight" v-on:filter-change="updateRate"></admin-list>
        </div>
      </el-tab-pane>
    </el-tabs>
    <add-flight v-on:click-add="addFlight"></add-flight>
    <!-- 航班编辑 -->
    <el-dialog :visible.sync="flightEditor.dialogVisibility" width="100%">
      <flight-editor v-on:cancel-edit="flightEditor.dialogVisibility=false" v-bind:flightData="flightEditor.info"></flight-editor>
    </el-dialog>
  </div>
</template>
<script scope>
import chakanyonghu from "../components/chakanyonghu.vue";
import addFlight from "../components/AddFlight.vue";
import FlightEditor from "../components/FlightEditor.vue";
import AdminList from "../components/AdminList.vue";
import FlightNumberChart from "../components/FlightNumberChart.vue";
import FlightDateChart from "../components/FlightDateChart.vue";
import AnimatedNumber from "../components/Animatiors/AnimatedNumber.vue";
export default {
  components: {
    chakanyonghu,
    addFlight,
    FlightEditor,
    AdminList,
    FlightNumberChart,
    FlightDateChart,
    AnimatedNumber
  },
  name: "admin",
  data() {
    return {
      chart: null,
      flights: [],
      tabPosition: "left",
      flightEditor: {
        dialogVisibility: false,
        info: null
      },
      cancelStat: {
        rate: 100,
        total: 0
      },
      normalStat: { rate: 100, total: 0 },
      delayStat: { rate: 100, total: 0 }
    };
  },
  methods: {
    addFlight() {
      this.flightEditor.info = null
      this.flightEditor.dialogVisibility = !this.flightEditor.dialogVisibility;
    },
    editFlight(info) {
      this.flightEditor.info = info
      this.flightEditor.dialogVisibility = !this.flightEditor.dialogVisibility;
    },
    updateRate(list) {
      // 给定航班状态 计算比例
      this.flights = list;
      this.delayStat.total = 0;
      this.cancelStat.total = 0;
      this.normalStat.total = 0;
      for (let item of list) {
        if (item.state == -1) this.delayStat.total += 1;
        else if (item.state == -2) this.cancelStat.total += 1;
        else this.normalStat.total += 1;
      }
      this.normalStat.rate = (
        (this.normalStat.total / list.length) *
        100
      ).toFixed(1);
      this.delayStat.rate = (
        (this.delayStat.total / list.length) *
        100
      ).toFixed(1);
      this.cancelStat.rate = Math.abs((
        100.0 -
        this.normalStat.rate -
        this.delayStat.rate
      ).toFixed(1));
    }
  }
};
</script>

<style scoped>
.flex {
  display: flex;
}
.j-s {
  justify-content: space-between;
}
.huge {
  font-size: 40px;
}
.text-right {
  text-align: right;
}
.rate-block {
  margin: 10px;
  width: 200px;
}
.rate-panel {
  margin-bottom: 20px;
  background-color: #fff;
  border: 1px solid transparent;
  border-radius: 4px;
  -webkit-box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
  box-shadow: 0 1px 1px rgb(0 0 0 / 5%);
}
.rate-panel-normal {
  border-color: #5cb85c;
  color: #5cb85c;
}
.rate-panel-normal > .panel-rate-heading {
  color: #fff;
  background-color: #5cb85c;
  border-color: #5cb85c;
}
.rate-panel-delay {
  border-color: #f0ad4e;
  color: #f0ad4e;
}
.rate-panel-delay > .panel-rate-heading {
  color: #fff;
  background-color: #f0ad4e;
  border-color: #f0ad4e;
}
.rate-panel-cancel {
  border-color: #d9534f;
  color: #d9534f;
}
.rate-panel-cancel > .panel-rate-heading {
  color: #fff;
  background-color: #d9534f;
  border-color: #d9534f;
}
.panel-rate-footer {
  padding: 10px 15px;
  background-color: #f5f5f5;
  border-top: 1px solid #ddd;
  border-bottom-right-radius: 3px;
  border-bottom-left-radius: 3px;
  font-weight: bold;
}
.panel-rate-heading {
  display: flex;
  justify-content: space-between;
  padding: 10px 15px;
  border-bottom: 1px solid transparent;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
</style>